
<script setup >

</script>

<template>
  <div class="box">
    <ul class="menu-box">
      <li><router-link to="/definePropsAndEmits"> defineProps和defineEmits</router-link></li>
      <li><router-link to="/defineExpose"> deineExpose</router-link></li>
      <li><router-link to="/useSlotsAndUseAttrs"> useSlotsAndUseAttrs</router-link></li>
      <li><router-link to="/toRefAndRefs"> toRefAndRefs</router-link></li>
      <li><router-link to="/Lifycle"> 生命周期</router-link></li>      
      <li><router-link to="/ProvideAndInject"> 依赖注入</router-link></li>      
      <li><router-link to="/compositionFun"> 组合式函数</router-link></li> 
      <li><router-link to="/xiangyingshi"> 响应式进一步理解</router-link></li>       
    </ul>
    <div class="content-box">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped>

.box{
  width: 100%;
  height: 100%;  
  display: flex;
}

.menu-box{
  padding-top:20px ;
  width: 200px;
  height: 100%;
  background: #ededed;
}

.menu-box li{
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.content-box{
  flex:1;
  height: 100%;
  background-color: gray;
}


</style>
